React Native-এ StyleSheet ব্যবহার করে স্টাইল প্রয়োগ করা হয়, যা CSS-এর মতোই তবে কিছু পার্থক্য রয়েছে। React Native তে স্টাইলিং করার সময় JavaScript Object ব্যবহার করা হয়, যা CSS এর মতোই কাজ করে তবে প্ল্যাটফর্ম অনুযায়ী কোড তৈরি হয়।
React Native এর StyleSheet একটি API যা আপনাকে স্টাইলগুলিকে শ্রেণীবদ্ধ এবং পুনঃব্যবহারযোগ্য করতে সাহায্য করে, যা পারফরম্যান্সে সাহায্য করে এবং কোডের গঠনকে উন্নত করে।
StyleSheet ব্যবহার করে স্টাইল প্রয়োগের উদাহরণ
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello, React Native!</Text>
</View>
);
};
// স্টাইলশীট তৈরি করা
const styles = StyleSheet.create({
container: {
flex: 1, // পুরো স্ক্রীন দখল করতে
justifyContent: 'center', // উপাদানকে উল্লম্বভাবে কেন্দ্রিত করা
alignItems: 'center', // উপাদানকে অনুভূমিকভাবে কেন্দ্রিত করা
backgroundColor: '#f0f0f0', // ব্যাকগ্রাউন্ড কালার
},
text: {
fontSize: 24, // ফন্ট সাইজ
fontWeight: 'bold', // ফন্টের ভার
color: '#333', // টেক্সট কালার
}
});
export default App;উপরের কোডের ব্যাখ্যা
- StyleSheet.create: এখানে
StyleSheet.create()ব্যবহার করা হয়েছে, যা স্টাইলগুলিকে JavaScript Object আকারে তৈরি করে এবং পারফরম্যান্স উন্নত করার জন্য এগুলি কম্পাইল করে। এটি React Native এর একটি প্র্যাকটিস যা স্টাইলিং কোডের ব্যবহারের পারফরম্যান্স বৃদ্ধি করতে সহায়ক। containerস্টাইল: এই স্টাইলটিViewকম্পোনেন্টের জন্য, যা পুরো স্ক্রীন জুড়ে থাকে। এর মধ্যে:flex: 1: এটি উপাদানকে পুরো স্ক্রীন দখল করতে সাহায্য করে।justifyContentএবংalignItems: এগুলি ব্যবহার করে আপনি উপাদানগুলিকে অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রিত করতে পারেন।backgroundColor: ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করা হয়।
textস্টাইল: এটি টেক্সটের স্টাইল, যেমন:fontSize: টেক্সটের আকার।fontWeight: ফন্টের ভার।color: টেক্সটের রঙ।
CSS-এর সাথে তুলনা
React Native-এ স্টাইলিং CSS-এর মতো হলেও কিছু ভিন্নতা রয়েছে, যেমন:
- CSS-এ স্টাইলগুলো আলাদা ফাইলের মধ্যে থাকে, কিন্তু React Native-এ JavaScript Object এর মাধ্যমে স্টাইল যুক্ত করা হয়।
- React Native flexbox ব্যবহার করে লেআউট তৈরি করে, যা CSS এর flexbox এর সাথে সম্পর্কিত তবে কিছু পার্থক্য থাকতে পারে।
- React Native শুধুমাত্র সিম্পল স্টাইল সমর্থন করে, যেমন
fontSize,margin,paddingইত্যাদি। কিছু CSS প্রোপার্টি (যেমনhover,focus,animation) React Native-এ নেই।
সারাংশ
React Native-এ StyleSheet ব্যবহার করে আপনি CSS-এর মতো স্টাইল প্রয়োগ করতে পারেন, তবে এখানে JavaScript Object ব্যবহার করে স্টাইল তৈরি করতে হয়। StyleSheet.create() ব্যবহার করে আপনি স্টাইলগুলোকে আরও কার্যকরভাবে এবং পারফরম্যান্স ভিত্তিকভাবে লিখতে পারবেন। এটি React Native অ্যাপ্লিকেশনের জন্য একটি শক্তিশালী এবং কার্যকরী স্টাইলিং পদ্ধতি।
Read more
